<template>
  <!-- 列表式 订单详情商品展示 -->
  <div class="an-goods-list">
    <el-image
      class="an-img"
      style="width: 100px; height:100px;"
      :src="infoData.goods.image"
      @click="toUrl"
    />
    <div class="an-text">
      <div class="an-title" @click="toUrl">{{infoData.goods.name}}</div>
      <div class="an-subtitle">{{infoData.goodsStandard}}</div>
      <div class="an-hang">
        <div class="an-money">
          ￥
          <strong>{{infoData.money}}</strong>
        </div>
        <div class="an-number">X {{infoData.goodsNum}}</div>
      </div>
    </div>
  </div>

  <goods-info
    v-if="isVisible"
    v-model:isVisible="isVisible"
    :id="goodsID"
    :remark="infoData.remarks"
  ></goods-info>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import goodsInfo from "@/components/GoodsInfo/index.vue";
import { OrderDetails } from "@/utils/interface";

@Options({
  components: {
    goodsInfo,
  },
  props: {
    tage: {
      type: Object,
      default: () => {},
    },
  },
})
export default class goodsSpec extends Vue {
  [x: string]: any;
  infoData: OrderDetails = this.tage;
  isVisible: Boolean = false;
  goodsID: number = 0;

  toUrl() {
    this.goodsID = this.infoData.goodsID;
    this.isVisible = true;
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/mixin.scss";
.an-goods-list {
  display: flex;
  font-size: 14px;
  background-color: $color-border4;
  .an-img {
    margin-right: 5px;
    flex: 0 0 auto;
    cursor: pointer;
  }
  .an-text {
    padding: 5px;
    flex: 1 1 auto;
    position: relative;
    .an-title {
      font-size: 16px;
      cursor: pointer;
    }
    .an-subtitle {
      color: $color-text2;
      padding: 5px 0;
    }
    .an-hang {
      position: absolute;
      bottom: 5px;
      left: 0;
      right: 10px;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>